<template>
<!-- 	<view class="page-container" v-if="showGetPhone">
		<view class="phone-bar">手机权限申请</view>
		<view class="phone-con">为了账号安全，请绑定手机号，如拒绝将登录失败</view>
		<button class="phone-bind-btn" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号一键绑定</button>
	</view> -->
	<view class="page-container">
		<view class="phone-bar">绑定手机号</view>
		<!-- <view class="phone-con"> -->
			<!-- <input type="number" focus="true" placeholder="请输入11位手机号码" maxlength="11" @input="handleInput" class=""> -->
		<!-- </view> -->
		<view class="login-wrapper">
			<view class="login-wrapper__item">
				<input class="login-wrapper__item__input" placeholder-class="placeholder" type="number" focus="true" placeholder="请输入11位手机号码" maxlength="11" @input="handleInput" />
			</view>
			
			<view class="login-wrapper__item">
				<input class="login-wrapper__item__input" maxlength="6" placeholder-class="placeholder" type="text" v-model="code" placeholder="请输入验证码" />
				<view class="login-wrapper__item__txt" v-if="isSend">{{countDown}}秒后重新发送</view>
				<view class="login-wrapper__item__send" v-else @click="sendCode">获取动态密码</view>
			</view>
		</view>
		<button class="phone-bind-btn" type="primary" @click="savePhone">手机号一键绑定</button>
	</view>
</template>

<script>
	import {check_phone} from '@/utils/utils.js'
	export default {
		data() {
			return {
				showGetPhone: false,
				phone: '',
				isSend: false,
				countDown: 119,
				code:''
			}
		},
		methods: {
			
			// 动态验证码获取
			async getDynamicCode(){
				let codeRes,
					params = {
						method: "api/v2/dynamic/code",
						receiver: this.phone,
						msgtype: 'login_msgcode'
					}
				codeRes = await this.$http(params);
				if(codeRes.status){
					uni.showToast({
						title: '发送验证码成功',
						icon: 'none'
					});
				}else{
					uni.showToast({
						title: codeRes.msg,
						icon: 'none'
					})
				}
			},
			
			// 发送验证码
			sendCode(){
				let timer,
					phone = this.phone;
				if(phone){
					if(check_phone(phone)){
						this.isSend = true;
						timer = setInterval(() => {
							if(this.countDown > 1){
								this.countDown--
							}else{
								this.countDown = 119;
								this.isSend = false;
								clearInterval(timer)
							}
						}, 1000)
						
						this.getDynamicCode()
					}else{
						uni.showToast({
							title: '手机号码格式有误!',
							icon: 'none'
						})
					}
				}else{
					uni.showToast({
						title: '手机号码不能为空!',
						icon: 'none'
					})
				}
			},
			
			
			
			// 保存手机号
			async savePhone(e) {
				if(check_phone(this.phone)){
					// 验证成功发送请求
					uni.setStorageSync('phone', this.phone);
					this.xcxBindLogin()
					
				}else{
					tt.showToast({
						title: '手机号码格式有误!',
						icon: 'fail'
					})
				}
				
			},
			
			// 获取手机号
			async getPhoneNumber(e) {
				let phone, params, session_key, phoneRes;
				session_key = uni.getStorageSync('session_key');
				params = {
					method: 'api/v2/member_login/get_phone_by_toutiao_program',
					sessionKey: session_key,
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv
				}
				phoneRes = await this.$http(params);
				if (phoneRes.status) {
					phone = phoneRes.data.phoneNumber;
					this.phoneNumber = phone;
					uni.setStorageSync('phone', phone);
					this.xcxBindLogin()
				} else {
					uni.showToast({
						title: phoneRes.msg,
						icon: "none"
					})
				}
			},
			handleInput(event) {

				this.phone = event.detail.value;
			},

			// 小程序登录
			async xcxBindLogin() {
				// 获取分销邀请人员的分销码

				let params, nickname, litpic, mobile, openid, loginRes, fxpcode;
				nickname = uni.getStorageSync('nickname');
				litpic = uni.getStorageSync('headimg');
				mobile = uni.getStorageSync('phone');
				openid = uni.getStorageSync('openid');
				fxpcode = uni.getStorageSync('fxpcode');
				fxpcode = fxpcode ? fxpcode : '';

				params = {
					method: "api/v2/member/login/login_by_phone",
					nickname:nickname,
					litpic:litpic,
					mobile:mobile,
					comefrom: "zhifubao",
					openid:openid,
					zfb_openid:openid,
					fxpcode:fxpcode,
					msg_code: this.code
				}
				//console.log(params)
				
				loginRes = await this.$http(params);
				//console.log(loginRes)
				if (loginRes.status) {
					//console.log(loginRes.data.memberInfo)
					this.$store.commit('login', loginRes.data.memberInfo)
					uni.setStorageSync('token', loginRes.data.token);
					uni.setStorageSync('userInfo', loginRes.data.memberInfo);
					uni.showToast({
						title: '绑定成功',
						icon: 'none'
					})
					
					let pages = getCurrentPages();
					let prev = pages[pages.length - 2];
					
					if(prev){
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}else{
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/home"
							})
						}, 1000)
					}
				} else {
					uni.showToast({
						title: loginRes.msg,
						icon: "none"
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	.page-container {
		padding: 20rpx;
	}

	.phone-bar {
		padding: 20rpx 0;
		text-align: center;
		font-size: $uni-font-size-lg;
	}

	.phone-con {
		padding: 40rpx 20rpx 20rpx;
		border-bottom: 2rpx solid $uni-border-color;
		font-size: $uni-font-size-base;
	}
	.login-wrapper{
		background-color: #fff;
		border-radius: 4rpx;
		padding: 0 20rpx;
	}
	.phone-bind-btn {
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color-primary !important;
		margin-top: 20rpx;
	}
	
	.login-wrapper__item{
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e5e5e5;
		&:last-child{
			border-bottom: none;
		}
		&__input{
			flex: 1 1 auto;
			padding: 30rpx 0 20rpx;
			font-size: $uni-font-size-base;
			font-family: Arial, Helvetica, sans-serif;
		}
		&__send{
			flex: 0 0 auto;
			color: $uni-color-primary;
			margin-left: 40rpx;
			font-size: $uni-font-size-sm;
		}
		&__txt{
			flex: 0 0 auto;
			color: $uni-text-color-disable;
			margin-left: 40rpx;
			font-size: $uni-font-size-sm;
			font-family: Arial, Helvetica, sans-serif;
		}
	}
	
</style>
